import React, { ReactNode } from 'react';
import { NavBar } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import '../styles/components/navHeader.scss';

interface NavHeaderProps {
    title: string;               // 标题
    showBack?: boolean;          // 是否显示返回按钮
    backPath?: string;           // 返回路径，不传则使用浏览器历史返回
    onBack?: () => void;         // 自定义返回函数
    right?: ReactNode;           // 右侧内容
    fixed?: boolean;             // 是否固定在顶部
}

const NavHeader: React.FC<NavHeaderProps> = ({
    title,
    showBack = true,
    backPath,
    onBack,
    right,
    fixed = true,
}) => {
    const navigate = useNavigate();

    // 处理返回按钮点击
    const handleBack = () => {
        if (onBack) {
            // 如果传入了自定义返回处理函数，则调用它
            onBack();
        } else if (backPath) {
            // 如果传入了返回路径，则导航到该路径
            navigate(backPath);
        } else {
            // 默认使用浏览器历史返回
            navigate(-1);
        }
    };

    return (
        <NavBar
            className={`common-nav-header ${fixed ? 'fixed' : ''}`}
            onBack={showBack ? handleBack : undefined}
            back={showBack ? <LeftOutline /> : null}
            right={right}
        >
            {title}
        </NavBar>
    );
};

export default NavHeader; 